<template>
  <div>
    <div
      ref="vctooltip"
      v-show="TipShow"
      class="devicesTip"
      :class="
        oBJ.warnLevel == 9 || oBJ.status == 0
          ? 'offlineBg'
          : oBJ.warnLevel == 10
          ? 'warnBg'
          : oBJ.warnLevel == 11
          ? 'warnBg'
          : oBJ.warnLevel == 6
          ? 'faultBg'
          : ''
      "
      :style="{ top: topY + 'px', left: leftX + 'px' }"
    ></div>
    <ScaleBox :width="1920" :height="1080">
      <div class="testmimicry">
        <div class="enterprise">
          <div>
            <el-select v-model="projectId" filterable placeholder="请选择项目" :teleported="false" @change="projectChg">
              <el-option v-for="item in ProjectList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </div>

          <div class="total">
            <div class="ok" style="color: #94ceff">
              总数
              <span>{{ statusStatic?.total || 0 }}</span>
            </div>
            <div class="ok" style="color: #6fe3ba">
              ● 正常
              <span>{{ statusStatic?.normal || 0 }}</span>
            </div>
            <div class="ok" style="color: #e05861">
              ● 报警
              <span>{{ statusStatic?.high + statusStatic?.low || 0 }}</span>
            </div>
            <div class="ok" style="color: #fed36a">
              ● 故障 <span>{{ statusStatic?.error || 0 }}</span>
            </div>
            <div class="ok" style="color: #cfcfcf">
              ● 离线 <span>{{ statusStatic?.offline || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="leftBox">
            <!-- 设备状态 -->
            <div class="statusBox">
              <div class="status">
                <img src="../assets/image/triangle.png" alt="" />
                <div class="title">设备状态</div>
              </div>
              <div
                v-loading="loading1"
                element-loading-background="rgba(0, 0, 0, 0.3)"
                class="scrollstatus"
                v-if="statusList?.length"
                @mouseover="handleMouseover($event)"
                @mouseout="handleMouseout($event)"
              >
                <vue3-seamless-scroll :step="0.5" :list="statusList" :hover="true" :limitScrollNum="33" :isWatch="true">
                  <div class="numBox" ref="table-box">
                    <div v-for="(item, i) in statusList" :key="i" class="numItem" :class="item.color">
                      <div class="itemInfo">{{ item }}</div>
                      <div class="devicesNum">{{ i < 9 ? `0${i + 1}` : i + 1 }}</div>
                    </div>
                  </div>
                </vue3-seamless-scroll>
              </div>
              <div class="empty" v-else>
                <el-empty description="暂无数据"></el-empty>
              </div>
            </div>
            <div class="liveWarnBox">
              <div class="liveWarn">
                <img src="../assets/image/triangle.png" alt="" />
                <div class="title">当前报警</div>
              </div>
              <div class="realTimeScroll">
                <div class="head">
                  <header>
                    <div>设备ID/设备名称</div>
                    <div>气体类型</div>
                    <div>报警类型</div>
                    <div>报警值</div>
                    <div>报警时间</div>
                  </header>
                </div>
                <div
                  v-loading="loading1"
                  element-loading-background="rgba(0, 0, 0, 0.3)"
                  class="realTimeContent"
                  v-if="WarnList?.length"
                  @mouseover="Mouseover($event)"
                  @mouseout="Mouseout($event)"
                >
                  <vue3-seamless-scroll :step="0.5" :list="WarnList" :hover="true" :limitScrollNum="7" :isWatch="true">
                    <div>
                      <div class="scrollItemBox" v-for="(item, i) in WarnList" :key="i">
                        <div class="typeBox">
                          <div>{{ item.deviceId }}</div>
                          <div>{{ item.device_name }}</div>
                        </div>
                        <div>
                          {{ item.type == 'oxygen' ? ' 氧气' : ' 可燃气' }}
                        </div>
                        <div>
                          <div
                            :style="{
                              color:
                                item.level == 9
                                  ? '#d1eaff'
                                  : item.level == 10
                                  ? '#2B8EF3'
                                  : item.level == 11
                                  ? '#e05861'
                                  : item.level == 6
                                  ? '#fed36a'
                                  : '#6fe3ba',
                              borderColor: 'transparent',
                              background: 'transparent',
                            }"
                          >
                            {{
                              item.level == 9
                                ? '离线'
                                : item.level == 10
                                ? '高报'
                                : item.level == 11
                                ? '低报'
                                : item.level == 6
                                ? '故障'
                                : ''
                            }}
                          </div>
                        </div>
                        <div>
                          <span v-if="item.level == 9 || item.level == 6">- -</span>
                          <span v-else>{{ item.warnData || 0 }}{{ item.type == 'oxygen' ? ' %V/V' : ' %LEL' }}</span>
                        </div>
                        <div>
                          {{ day(item.timestamp).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                      </div>
                    </div>
                  </vue3-seamless-scroll>
                </div>
                <div class="empty" v-else>
                  <el-empty description="暂无数据"></el-empty>
                </div>
              </div>
            </div>
          </div>
          <div class="rightBox">
            <div class="realTimeBox">
              <div class="realTime">
                <img src="../assets/image/triangle.png" alt="" />
                <div class="title">实时监测</div>
              </div>

              <div class="realTimeScroll">
                <div class="head">
                  <header>
                    <div>设备ID/设备名称</div>
                    <div>设备状态</div>
                    <div>气体类型</div>
                    <div>浓度值</div>
                    <div>单位</div>
                  </header>
                </div>

                <div
                  v-loading="loading3"
                  element-loading-background="rgba(0, 0, 0, 0.3)"
                  class="realTimeContent"
                  v-if="statusList?.length"
                  @mouseover="Mouseover($event)"
                  @mouseout="Mouseout($event)"
                >
                  <vue3-seamless-scroll
                    :step="0.5"
                    :list="statusList"
                    :hover="true"
                    :limitScrollNum="15"
                    :isWatch="true"
                  >
                    <div>
                      <div class="scrollItemBox" v-for="(item, i) in statusList" :key="i">
                        <div class="typeBox">
                          <div>{{ item.deviceId }}</div>
                          <div>{{ item.device_name }}</div>
                        </div>
                        <div>
                          <el-tag
                            v-if="item.warnSatus == 1"
                            :color="
                              item.warnLevel == 9 || item.status == 0
                                ? 'rgba(255, 255, 255, 0.26)'
                                : item.warnLevel == 10
                                ? 'rgba(43, 142, 243,0.3)'
                                : item.warnLevel == 11
                                ? 'rgba(245, 108, 108,0.3)'
                                : item.warnLevel == 6
                                ? 'rgba(254, 211, 106, 0.26)'
                                : 'rgba(111, 227, 186, 0.26)'
                            "
                            :style="{
                              color:
                                item.warnLevel == 9 || item.status == 0
                                  ? '#d1eaff'
                                  : item.warnLevel == 10
                                  ? '#2B8EF3'
                                  : item.warnLevel == 11
                                  ? '#e05861'
                                  : item.warnLevel == 6
                                  ? '#fed36a'
                                  : '#6fe3ba',
                              borderColor: 'transparent',
                            }"
                            >{{
                              item.warnLevel == 9 || item.status == 0
                                ? '离线'
                                : item.warnLevel == 10
                                ? '高报'
                                : item.warnLevel == 11
                                ? '低报'
                                : item.warnLevel == 6
                                ? '故障'
                                : ''
                            }}</el-tag
                          >
                          <el-tag
                            v-else
                            :color="item.status == 1 ? 'rgba(111, 227, 186, 0.26)' : 'rgba(255, 255, 255, 0.26)'"
                            :style="{
                              color: item.status == 1 ? '#6fe3ba' : '#d1eaff',
                              borderColor: 'transparent',
                            }"
                            >{{ item.status == 1 ? '正常' : '离线' }}</el-tag
                          >
                        </div>
                        <div>
                          {{ item.type == 'oxygen' ? ' 氧气' : ' 可燃气' }}
                        </div>
                        <div>
                          <span v-if="item.warnLevel == 9 || item.status == 0 || item.warnLevel == 6">- -</span>
                          <span v-else> {{ item.concentration }}</span>
                        </div>
                        <div>
                          {{ item.type == 'oxygen' ? ' %V/V' : ' %LEL' }}
                        </div>
                      </div>
                    </div>
                  </vue3-seamless-scroll>
                </div>
                <div class="empty" v-else>
                  <el-empty description="暂无数据"></el-empty>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ScaleBox>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import Mimicry from '@/utils/mimicry'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import ScaleBox from '@/components/scaleBox.vue'
let topY = ref(0)
let leftX = ref(0)
let TipShow = ref(false)
let times = null
onMounted(() => {
  getProjectList()
})
let ProjectList = ref()
let projectId = ref()
// 获取项目
async function getProjectList() {
  clearInterval(times)
  times = null
  let res = await Mimicry.getProject()
  ProjectList.value = res.data
  projectId.value = ProjectList.value[0].id
  getWarnList(true)
  getStatusList(true)
  refresh()
}
const loading1 = ref(true)
const loading3 = ref(true)
let WarnList = ref()
// 获取预警
async function getWarnList(e) {
  if (e) {
    loading1.value = true
  }
  let res = await Mimicry.postCurrentAlarm({
    projectId: projectId.value,
  })
  loading1.value = false
  WarnList.value = res.data
}

onBeforeUnmount(() => {
  clearInterval(times)
})
let statusList = ref()
let statusStatic = ref()
// 获取设备状态
async function getStatusList(e) {
  if (e) {
    loading3.value = true
  }
  let res = await Mimicry.postDeviceStatus({
    projectId: projectId.value,
  })
  loading3.value = false
  statusList.value = res.data.list

  statusList.value?.map(e => {
    if (e.warnLevel == 9 || e.status == 0) {
      e.color = 'offlineCor'
    } else if (e.warnLevel == 10 || e.warnLevel == 11) {
      e.color = 'warnlCor'
    } else if (e.warnLevel == 6) {
      e.color = 'faultCor'
    } else {
      e.color = 'normalCor'
    }
    return e
  })

  statusList.value.sort((a, b) => {
    return b.status - a.status
  })
  statusStatic.value = res.data.statusStatic
}

function refresh() {
  times = setInterval(() => {
    getStatusList()
    getWarnList()
  }, 3000)
}

function projectChg() {
  getWarnList()
  getStatusList()
}

let oBJ = ref({})
let vctooltip = ref()
function handleMouseover(el, item) {
  clearInterval(times)
  times = null
  //判断el是否在content的`<td>`标签上
  if (el.target.className.includes('itemInfo')) {
    el.target.style.cursor = 'pointer'
    //显示div
    vctooltip.value.style.display = ''
    topY.value = el.clientY - 100
    leftX.value = el.clientX + 50
    oBJ.value = JSON.parse(el.target.innerHTML)
    // <div>warnLevel:${oBJ.value.warnLevel}</div>
    //      <div>status:${oBJ.value.status}</div>
    vctooltip.value.innerHTML = `<div
          >
            <div style="margin: 4px 0;color:${
              oBJ.value.warnLevel == 9 || oBJ.value.status == 0
                ? '#d1eaff'
                : oBJ.value.warnLevel == 10
                ? '#e05861'
                : oBJ.value.warnLevel == 11
                ? '#e05861'
                : oBJ.value.warnLevel == 6
                ? '#fed36a'
                : '#6fe3ba'
            }">${oBJ.value.deviceId}</div>
            <div style="margin: 4px 0;display: flex;align-items: baseline;">
              <div style="flex-shrink: 0;">设备名称：</div>
              <div style="line-height: 20px;">${oBJ.value.name ? oBJ.value.name : '- -'}</div>
            </div>
            <div style="margin: 4px 0;display: flex;align-items: center;">
              <div>状态：</div>
              <div style="line-height: 20px;">
              <span style="display:${oBJ.value.warnSatus == 1 ? 'inline-block' : 'none'}">
              ${
                oBJ.value.warnLevel == 9 || oBJ.value.status == 0
                  ? '离线'
                  : oBJ.value.warnLevel == 10
                  ? '高报'
                  : oBJ.value.warnLevel == 11
                  ? '低报'
                  : oBJ.value.warnLevel == 6
                  ? '故障'
                  : ''
              }
              </span>
                <span style="display:${oBJ.value.warnSatus == 0 ? 'inline-block' : 'none'}">
                ${oBJ.value.status == 1 ? '正常' : '离线'}
                </span>
              </div>
            </div>
            <div style="margin: 4px 0;display: flex;align-items: baseline;">
              <div>气体类型：</div>
              <div style="line-height: 20px;">${oBJ.value.type == 'oxygen' ? ' 氧气' : ' 可燃气'}</div>
            </div>
            <div style="margin: 4px 0;display: flex;align-items: baseline;">
              <div>浓度值：</div>
              <div style="line-height: 20px;display:${
                oBJ.value.warnLevel == 9 || oBJ.value.status == 0 ? 'inline-block' : 'none'
              }">- -</div>
              <div style="line-height: 20px;display:${
                oBJ.value.warnLevel == 9 || oBJ.value.status == 0 ? 'none' : 'inline-block'
              }">${oBJ.value.concentration}${oBJ.value.type == 'oxygen' ? ' %V/V' : ' %LEL'} </div>
            </div>
            <div style="margin: 4px 0;display: flex;align-items: baseline;">
              <div style="flex-shrink: 0;">位置：</div>
              <div style="line-height: 20px;">${oBJ.value.location || '- -'}</div>
            </div>
          </div>`
  }
}

function handleMouseout(el) {
  refresh()
  if (el.target.className.includes('itemInfo')) {
    vctooltip.value.style.display = 'none'
  }
}
function Mouseover(el) {
  clearInterval(times)
  times = null
}
function Mouseout(el) {
  refresh()
}
</script>
<style scoped lang="scss">
::v-deep .el-input__wrapper {
  background: #041a3b;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  font-size: 18px;
  box-shadow: none;
}

::v-deep .el-select .el-input__inner {
  color: rgb(148, 206, 255);
}
::v-deep .el-select:hover .el-input__inner {
  border: transparent !important;
  color: rgb(148, 206, 255);
}
::v-deep .el-select:hover .el-input__inner::placeholder {
  border: transparent !important;
  color: rgb(148, 206, 255);
}
::v-deep .el-scrollbar {
  text-align: left;
}
::v-deep .el-popper__arrow {
  display: none !important;
}
::v-deep .el-popper {
  background: rgb(0, 55, 117);
}

::v-deep .el-select__popper.el-popper {
  border: 1px solid #409eff;
}

::v-deep .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: rgba(32, 130, 147, 0.2);
}

::v-deep .el-select-dropdown__item {
  color: #ffffff;
  line-height: 50px;
  height: 50px;
  font-size: 14px;
}
::v-deep .el-select {
  --el-select-border-color-hover: transparent;
}
.devicesTip {
  width: 240px;
  background: url('../assets/image/normalBg.png') no-repeat;
  background-position: 100% 100%;
  background-size: 100% 100%;
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #d1eaff;
  padding: 25px 35px;
  text-align: left;
  z-index: 999999 !important;
  div {
    margin: 4px 0;
    display: flex;
    &:nth-child(1) {
      flex-shrink: 0;
    }
    &:nth-child(2) {
      line-height: 20px;
    }
  }

  .devicesId {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .cor1 {
    color: #6fe3ba;
  }
  .cor2 {
    color: #e05861;
  }
  .cor3 {
    color: #fed36a;
  }
  .cor4 {
    color: #d1eaff;
  }
}
.normalBg {
  background: url('../assets/image/normalBg.png') no-repeat;
  background-position: 100% 100%;
  background-size: 100% 100%;
}
.faultBg {
  background: url('../assets/image/faultBg.png') no-repeat;
  background-position: 100% 100%;
  background-size: 100% 100%;
}
.warnBg {
  background: url('../assets/image/warnBg.png') no-repeat;
  background-position: 100% 100%;
  background-size: 100% 100%;
}
.offlineBg {
  background: url('../assets/image/offlineBg.png') no-repeat;
  background-position: 100% 100%;
  background-size: 100% 100%;
}
/* 状态颜色 */
/* 正常 */
.normalCor {
  color: #6fe3ba;
  background: rgba(111, 227, 186, 0.26);
  &:hover {
    box-shadow: 0px 0px 10px #6fe3ba;
  }
}

/* 预警 */
.warnlCor {
  color: #e05861;
  background: rgba(224, 88, 97, 0.36);
  &:hover {
    box-shadow: 0px 0px 10px #e05861;
  }
}

/* 故障 */
.faultCor {
  color: #fed36a;
  background: rgba(254, 211, 106, 0.26);
  &:hover {
    box-shadow: 0px 0px 10px #fed36a;
  }
}

/* 离线 */
.offlineCor {
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.26);
  &:hover {
    box-shadow: 0px 0px 10px #cfcfcf;
  }
}
.testmimicry {
  width: 100%;
  height: calc(100% - 120px);
  position: relative;
  box-sizing: border-box;
  top: 95px;

  .el-dropdown-link {
    border: none;
    .el-dropdown-menu__item {
      &:hover {
        background: transparent;
      }
    }
  }

  .enterprise {
    margin: 20px;
    display: flex;
    align-items: flex-end;
    padding-left: 35px;

    .total {
      display: flex;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0px;
      div {
        &:nth-child(1) {
          margin-left: 30px;
        }
      }
      span {
        margin: 0 12px;
        &:nth-child(1) {
          margin-right: 30px;
        }
      }
    }
  }

  .mainBox {
    color: red;
    display: flex;
    justify-content: space-between;
    margin: 30px 20px;

    img {
      width: 21px;
      height: 16px;
      margin-right: 10px;
    }
    .title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: #fff;
      text-align: left;
      vertical-align: top;
    }
    .leftBox {
      width: 820px;
      box-sizing: border-box;
      position: relative;

      .statusBox {
        padding: 25px 0;
        background: #011d33;
        height: 340px;
        box-sizing: border-box;
        padding-bottom: 20px;
        margin-bottom: 40px;
        overflow: hidden;
        .status {
          padding: 0 35px;
          padding-top: 10px;
          display: flex;
          align-items: center;
          border-radius: 5px;
          box-sizing: border-box;
        }
        .scrollstatus {
          height: 240px;
          padding: 15px 35px;
          margin-bottom: 0;
          box-sizing: border-box;
          div:nth-child(1) {
            overflow: hidden;
          }
          .numBox {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .itemInfo {
              width: 10.5%;
              height: 40px;
              position: absolute;
              opacity: 0;
            }
            .numItem {
              width: 10.5%;
              margin: 1%;
              overflow: hidden;
              cursor: pointer;
              .devicesNum {
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                font-weight: 400;
                text-align: center;
                border-radius: 2px;
              }
            }
          }
        }
      }
      .liveWarnBox {
        background: #011d33;
        padding: 25px 0;
        height: 465px;
        box-sizing: border-box;
        .liveWarn {
          display: flex;
          align-items: center;
          border-radius: 5px;
          padding: 0 35px;
        }
        .realTimeScroll {
          width: 100%;
          height: 100%;
          padding: 25px 35px;
          padding-bottom: 0;
          box-sizing: border-box;
          // margin-bottom: 30px;
          // padding: 20px 0;
          .head {
            background: linear-gradient(
              180deg,
              rgba(5, 156, 255, 0.35) 0%,
              rgba(5, 156, 255, 0) 50%,
              rgba(5, 156, 255, 0.35) 100%
            );

            header {
              width: 100%;
              height: 50px;
              padding: 0 20px;
              box-sizing: border-box;
              font-family: Arial;
              background: #022752;
              color: #96d0ff;
              display: flex;
              text-align-last: left;
              align-items: center;

              background: linear-gradient(180deg, rgba(5, 156, 255, 1) 37%, rgba(51, 248, 242, 1) 100%);

              -webkit-background-clip: text;
              color: transparent;
              z-index: 999;
              div {
                font-size: 18px;
                font-weight: 600;
                &:nth-child(1) {
                  width: 30%;
                }
                &:nth-child(2) {
                  flex: 1;
                }
                &:nth-child(3) {
                  flex: 1;
                }
                &:nth-child(4) {
                  flex: 1;
                }
                &:nth-child(5) {
                  width: 24%;
                }
              }
            }
          }

          .realTimeContent {
            width: 100%;
            height: 320px;
            overflow: hidden;
            .scrollItemBox {
              height: 45px;
              padding: 0 20px;
              box-sizing: border-box;
              display: flex;
              // justify-content: space-around;
              text-align-last: left;
              align-items: center;
              // div {
              //   flex: 1;
              //   font-size: 14px;
              //   color: #d1eaff;
              // }

              div {
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 21px;
                &:nth-child(1) {
                  width: 30%;
                  color: rgba(148, 206, 255, 1);
                }
                &:nth-child(2) {
                  flex: 1;
                  color: rgba(148, 206, 255, 1);
                }
                &:nth-child(3) {
                  flex: 1;
                }
                &:nth-child(4) {
                  flex: 1;
                  color: rgba(148, 206, 255, 1);
                }
                &:nth-child(5) {
                  width: 24%;
                  word-spacing: normal;
                  color: rgba(148, 206, 255, 1);
                }
              }
              // &:nth-child(2n) {
              //   // background: rgba(67, 128, 155, 0.2);
              //   background: #0a112e;
              // }

              .typeBox {
              }
            }
            .noWarn {
              width: 100%;
              text-align: center;
              color: rgba(209, 234, 255, 1);
              font-size: 18px;
              line-height: 48px;
            }
          }
        }
      }
    }
    .rightBox {
      width: 1000px;
      height: 845px;
      overflow: hidden;
      background: #011d33;
      box-sizing: border-box;
      border-radius: 5px;
      .realTimeBox {
        padding: 25px 0;
        .realTime {
          display: flex;
          align-items: center;
          padding: 0 35px;
        }
      }
      .realTimeScroll {
        width: 100%;
        height: 100%;
        padding: 25px 35px;
        box-sizing: border-box;

        .head {
          background: linear-gradient(
            180deg,
            rgba(5, 156, 255, 0.35) 0%,
            rgba(5, 156, 255, 0) 50%,
            rgba(5, 156, 255, 0.35) 100%
          );

          header {
            width: 100%;
            height: 50px;
            padding: 0 20px;
            box-sizing: border-box;
            font-family: Arial;
            background: #022752;
            color: #96d0ff;
            display: flex;
            text-align-last: left;
            align-items: center;

            background: linear-gradient(180deg, rgba(5, 156, 255, 1) 37%, rgba(51, 248, 242, 1) 100%);

            -webkit-background-clip: text;
            color: transparent;
            z-index: 999;
            div {
              font-size: 18px;
              font-weight: 600;
              &:nth-child(1) {
                width: 30%;
              }
              &:nth-child(2) {
                flex: 1;
              }
              &:nth-child(3) {
                flex: 1;
              }
              &:nth-child(4) {
                flex: 1;
              }
              &:nth-child(5) {
                flex: 1;
              }
            }
          }
        }

        .realTimeContent {
          width: 100%;
          height: 690px;
          overflow: hidden;
          .scrollItemBox {
            height: 45px;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            // justify-content: space-around;
            text-align-last: left;
            align-items: center;
            // div {
            //   flex: 1;
            //   font-size: 14px;
            //   color: #d1eaff;
            // }

            div {
              font-size: 16px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 21px;
              &:nth-child(1) {
                width: 30%;
                color: rgba(148, 206, 255, 1);
              }
              &:nth-child(2) {
                flex: 1;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
                // padding-right: 20px;
                // box-sizing: border-box;
              }
              &:nth-child(3) {
                flex: 1;
                color: rgba(148, 206, 255, 1);
              }
              &:nth-child(4) {
                color: rgba(148, 206, 255, 1);
                flex: 1;
              }
              &:nth-child(5) {
                color: rgba(148, 206, 255, 1);
                flex: 1;
              }
            }
          }
          .noWarn {
            width: 100%;
            text-align: center;
            color: rgba(209, 234, 255, 1);
            font-size: 18px;
            line-height: 48px;
          }
        }
      }
    }
  }
}
</style>